import React, { forwardRef } from 'react';
import './index.scss';

export interface TextNumberProps {
  text?: string;
  number?: string | number;
  textSize?: number;
  numberSize?: number;
  spacing?: number;
  direction?: 'horizontal' | 'vertical';
  align?: 'left' | 'center' | 'right';
  size?: 'small' | 'medium' | 'large';
  theme?: 'light' | 'dark';
  textColor?: string;
  numberColor?: string;
  textWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  numberWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  onClick?: () => void;
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const TextNumber = forwardRef<HTMLDivElement, TextNumberProps>((props, ref) => {
  const {
    text = '累计出货人数',
    number = '118755',
    textSize,
    numberSize,
    spacing,
    direction = 'vertical',
    align = 'left',
    size = 'medium',
    theme = 'dark',
    textColor,
    numberColor,
    textWeight = 'normal',
    numberWeight = 'bold',
    noResponsiveScale = false,
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    onClick?.();
  };

  const classNames = [
    'hzdz-text-number',
    `hzdz-text-number--${size}`,
    `hzdz-text-number--${theme}`,
    `hzdz-text-number--${direction}`,
    `hzdz-text-number--${align}`,
    noResponsiveScale ? 'no-responsive-scale' : '',
    className
  ].filter(Boolean).join(' ');

  const textStyle: React.CSSProperties = {
    fontWeight: textWeight,
    fontSize: textSize ? `${textSize}px` : undefined,
    color: textColor,
  };

  const numberStyle: React.CSSProperties = {
    fontWeight: numberWeight,
    fontSize: numberSize ? `${numberSize}px` : undefined,
  };

  const containerStyle: React.CSSProperties = {
    ...style,
    gap: spacing ? `${spacing}px` : undefined,
    display: 'flex',
    flexDirection: direction === 'vertical' ? 'column' : 'row',
    alignItems: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end',
  };

  return (
    <div
      ref={ref}
      className={classNames}
      style={containerStyle}
      onClick={handleClick}
      {...otherProps}
    >
      {text && (
        <div className="hzdz-text-number__text" style={textStyle}>
          {text}
        </div>
      )}
      {(number !== undefined && number !== null) && (
        <div className="hzdz-text-number__number" style={numberStyle}>
          {number}
        </div>
      )}
    </div>
  );
});

TextNumber.displayName = 'TextNumber';

export default TextNumber;
